<template>
    <view class="content">
        <view class="title ">您好，</view>
        <view class="title">欢迎使用搬搬货小程序</view>
        <view class="logo">
            <image
                src="https://www.banbanhuo.com/minio/banbanhuo/d40886ed5923adf9b24d97dd52446b64706778e3c3565799224cde654585b442.jpg" />
        </view>
        <button v-if="isAuth" class="btn flex_c" open-type="getPhoneNumber"
            @getphonenumber="getPhoneNumber">手机号快捷登录</button>
        <button v-else class="btn flex_c" @click="authTips">手机号快捷登录</button>
        <view class="auth flex_c">
            <view :class="{ 'active': isAuth }" class="check flex_c" @click="handlerAuth">{{ isAuth ? '√' : '' }}</view>
            <view>我已阅读并同意<text class="highlight" @click="toAgreement">《用户协议》</text>和<text class="highlight"
                    @click="toStandard">《用户行为规范》</text></view>
        </view>
    </view>
    <!-- 协议提示 -->
    <up-modal showCancelButton :show="showModal" title="用户协议及用户行为规范" confirm-color="#FE6E04" @confirm="confirm"
        @cancel="showModal = false">
        <view style="color: #555555;font-size: 28rpx;">请您仔细阅读下述文本并确认是同意<text class="highlight"
                @click="toAgreement">《用户协议》</text>和<text class="highlight" @click="toStandard">《用户行为规范》</text></view>
    </up-modal>
</template>

<script setup lang="ts">
import { computed, ref } from 'vue';
import type { LoginWxMinParams } from '@/types'
import { weixinMiniAppLogin, createInviter } from '@/api/index/index'
import { getMemberInfo as getMemberInfoApi } from '@/api/mine/userInfo'
import { onLoad } from '@dcloudio/uni-app';
import { useMemberStore } from '@/stores'
const memberStore = useMemberStore()

onLoad(() => {
    getCode()
})
const loginForm: LoginWxMinParams = {
    phoneCode: '',
    loginCode: '',
    state: 'default',
    roleType: 1
}
// 获取code
const getCode = (() => {
    uni.login({
        success: function (res: UniApp.LoginRes) {
            loginForm.loginCode = res.code
        }
    })
})
const role = computed(() => {
    return uni.getStorageSync("role") || "customer"
})
const isAuth = ref(false)
const handlerAuth = () => {
    isAuth.value = !isAuth.value
}
const showModal = ref(false)
// 登录提示
const authTips = () => {
    showModal.value = true
}
const confirm = () => {
    isAuth.value = true
    showModal.value = false
}
// 登录授权
const getPhoneNumber = async (e: any) => {
    if (e.detail.errMsg !== 'getPhoneNumber:ok') {
        return;
    }
    uni.showLoading({ title: '登录中' })
    loginForm.phoneCode = e.detail.code
    loginForm.roleType = role.value == 'customer' ? 1 : 2
    try {
        const res: any = await weixinMiniAppLogin(loginForm)
        memberStore.setUserInfo(res.data)
        // 获取用户个人信息
        getMemberInfoApi().then((res: any) => {
            if (res.code == 0 && res.data) {
                memberStore.setMemberInfo(res.data)
                checkShare(res.data)
                uni.switchTab({ url: '/pages/tabbar/home/home' })
                uni.setStorageSync("loadData", true)
            }
        })
        uni.hideLoading()
    } catch (e) {
        uni.showToast({
            icon: 'none',
            title: '登录失败'
        })
        getCode()
        uni.hideLoading()
    }
}
// 检查是否分享
const checkShare = (data: any) => {
    // const qrQuery = uni.getStorageSync("qrQuery")
    // if (qrQuery) {
    //     console.log(qrQuery);
    //     const par = {
    //         inviterId:qrQuery.split("&")[0],
    //         invitedId:data.id,
    //         invitationCode:""
    //     }
    // }
}
// 跳转到用户协议
const toAgreement = () => {
    uni.navigateTo({
        url: '/pages/public/agreement/agreement'
    })
}
// 跳转用户行为规范
const toStandard = () => {
    uni.navigateTo({
        url: '/pages/public/standard/standard'
    })
}
</script>

<style lang="scss" scoped>
.content {
    width: 100%;
    height: 100vh;
    background: linear-gradient(151deg, #FFE9BE 0%, #FFFFFF 100%);
    overflow: hidden;
}

.title {
    font-weight: 700;
    font-size: 48rpx;
    color: #222222;
    line-height: 80rpx;
    margin-left: 40rpx;
}

.logo {
    width: 240rpx;
    height: 240rpx;
    border-radius: 50%;
    margin: 0 auto;
    margin-top: 140rpx;

    image {
        width: 240rpx;
        height: 240rpx;
        border-radius: 50%;
    }
}

.btn {
    width: 590rpx;
    height: 88rpx;
    background: linear-gradient(90deg, #F7D780 0%, #FF6A19 100%);
    border-radius: 76rpx 76rpx 76rpx 76rpx;
    font-weight: 700;
    font-size: 32rpx;
    color: #FFFFFF;
    margin: 0 auto;
    margin-top: 188rpx;
}

.auth {
    width: 100%;
    height: 42rpx;
    margin-top: 20rpx;
    font-size: 26rpx;
    color: #555555;

    .check {
        width: 28rpx;
        height: 28rpx;
        border-radius: 4rpx 4rpx 4rpx 4rpx;
        border: 2rpx solid #555555;
        font-size: 22rpx;
        margin-right: 16rpx;
        box-sizing: border-box;
    }

    .active {
        border-color: #FE6E04;
        color: #FE6E04;
    }

}

.highlight {
    color: #FE6E04;
}
</style>